<template>
  <section>
    <div id="userDetails">
      <!-- 左边头像 -->
      <div class="headImg">
        <img :src="userInfo.user_img" alt="用户头像" v-if="userInfo.user_img" />
        <img src="@/assets/initialHead.jpeg" alt="" v-else />
      </div>
      <!-- 右边详情 -->
      <div class="suerEdit">
        <div>
          <P>
            <span>0</span>
            <span>粉丝</span>
          </P>
          <P>
            <span>14</span>
            <span>关注</span>
          </P>
          <P>
            <span>0</span>
            <span>获赞</span>
          </P>
        </div>
        <div @click="editClick">设置</div>
      </div>
    </div>

    <div id="information">
      <h2>
        {{ userInfo.name }}
        <img src="@/assets/female.png" alt="" v-if="userInfo.gender == 0" />
        <img src="@/assets/male.png" alt="" v-else />
      </h2>
      <p v-if="userInfo.user_desc">{{ userInfo.user_desc }}</p>
      <p v-else>这个人很神秘，什么都没有写 L(・o・)」</p>
    </div>
  </section>
</template>

<script>
export default {
  props: ["userInfo"],
  methods: {
    editClick() {
      this.$emit("editClick");
    },
  },
};
</script>

<style lang="less" scoped>
#userDetails {
  background-color: white;
  padding: 0 3.333vw;
  display: flex;
  .headImg {
    margin-right: 5.556vw;
    width: 23.611vw;
    height: 23.611vw;
    img {
      width: 23.611vw;
      height: 23.611vw;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .suerEdit {
    position: relative;
    &::before {
      content: "";
      display: block;
      position: absolute;
      height: 5.556vw;
      border: 0.278vw solid rgba(216, 214, 214, 0.822);
      top: 4.722vw;
      left: 29.167vw;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      height: 5.556vw;
      border: 0.278vw solid rgba(216, 214, 214, 0.822);
      top: 4.722vw;
      right: 19.444vw;
    }
    div:first-child {
      display: flex;
      margin-left: 9.722vw;
      p {
        padding: 2.778vw 0;
        font-size: 3.611vw;
        span {
          display: block;
          width: 19.444vw;
          text-align: center;
          margin-bottom: 0.556vw;
          &:nth-child(2) {
            color: rgb(148, 146, 146);
          }
        }
      }
    }
    div:last-child {
      position: absolute;
      border: 0.278vw solid skyblue;
      border-radius: 1.389vw;
      right: 2.778vw;
      width: 52.778vw;
      height: 7.778vw;
      line-height: 7.778vw;
      text-align: center;
      font-size: 4.444vw;
      color: skyblue;
    }
  }
}
#information {
  padding: 2.778vw;
  background-color: white;
  h2 {
    font-size: 5.556vw;
    margin: 0 0 0 1.389vw;
    font-weight: 400;
    img {
      margin-left: 1.389vw;
      width: 6.944vw;
      height: 6.944vw;
      vertical-align: middle;
    }
  }
  p {
    font-size: 3.611vw;
    margin-top: 2.778vw;
    color: rgb(148, 146, 146);
  }
}
</style>
